import React, { Component } from 'react'
import { Layout,Row, Col, Menu } from 'antd';
import {Link,Switch,Route,Redirect} from 'react-router-dom';

import {
    UserOutlined,
    ToolOutlined,
    UnlockOutlined,
    AppstoreOutlined,
    MailOutlined,
    SettingOutlined 
  } from '@ant-design/icons';
// import axios from '../../http/http'
import './index.less'
import HomePage from '../HomePage';
import Dish from '../dish';
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
const rootSubmenuKeys = ['sub1', 'sub2','sub3',
'sub4','sub5','sub6','sub7'];
export default class Home extends Component {
    state={
        height:window.innerHeight-60 +'px'
    }
    componentDidMount(){
        window.onresize=()=>{
            this.setState(()=>{
                return {height:window.innerHeight-60+'px'}
            })
        }
    }
    render() {
        return (
            <div className="home-container">
                <Layout>
                    {/* 头部导航区域 */}
                    <Header className="header-container">
                        <Row className='header-row'>
                            <Col span={4}>
                                <div className='user-content'>
                                    <UserOutlined twoToneColor="#ffffff" className='icon-size'/>
                                    <div className='user-info'>
                                        <p>用户名：???</p>
                                        <p>用户ID：???</p>
                                    </div>
                                </div>
                            </Col>
                            <Col span={16}>
                                <div className='title-name'>订餐管理系统</div>
                            </Col>
                            <Col span={4}>
                                <div className='setting-box'>
                                    <div className='setting'>
                                        <ToolOutlined/>
                                        <span>账户设置</span>   
                                    </div>
                                    <div className="setting" style={{marginLeft:'10px'}}>
                                        <UnlockOutlined />
                                        <span>退出</span>   
                                    </div>
                                </div>
                            </Col>
                        </Row>

                    </Header>
                    <Layout className="content-box">
                        {/* 侧边导航 */}
                        <Sider className='sider-container'>
                            <Aside />
                        </Sider>
                        <Content className='content-container' style={{height:this.state.height}}>
                            <Switch>
                                {/* 注册路由 */}
                                <Route path="/home/homePage" component={HomePage}></Route>
                                <Route path='/home/dish' component={Dish}></Route>
                                <Redirect to="/home/homePage"></Redirect>
                            </Switch>
                        </Content>
                    </Layout>
                </Layout>
               
            </div>
        )
    }
}
// 侧边导航组件
const  Aside= () => {
    const [openKeys, setOpenKeys] = React.useState(['sub1']);
    const onOpenChange = keys => {
        const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        setOpenKeys(keys);
        } else {
        setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };
    return (
        <>
            <Menu 
            mode="inline" 
            openKeys={openKeys} 
            onOpenChange={onOpenChange} 
            theme="light"
            style={{ backgroundColor:'#4AB6E0'}}>
                <SubMenu key="sub1" icon={<MailOutlined />} title="首页">
                    <Link to="/home/homePage"><Menu.Item key="26">首页</Menu.Item></Link>
                </SubMenu>
                <SubMenu key="sub2" icon={<AppstoreOutlined />} title="菜品">
                    <Link to='/home/dish'>
                        <Menu.Item key="1">菜品类别</Menu.Item>
                    </Link>
                    <Menu.Item key="2">菜品档案</Menu.Item>
                    <Menu.Item key="3">菜品口味</Menu.Item>
                    <Menu.Item key="4">菜品管理</Menu.Item>
                    <Menu.Item key="5">菜品单位</Menu.Item>
                </SubMenu>
                <SubMenu key="sub3" icon={<SettingOutlined />} title="库存">
                    <Menu.Item key="6">菜品库存</Menu.Item>
                    <Menu.Item key="7">菜品盘点</Menu.Item>
                </SubMenu>
                <SubMenu key="sub4" icon={<SettingOutlined />} title="促销">
                    <Menu.Item key="8">优惠卷管理</Menu.Item>
                    <Menu.Item key="9">热卖套餐</Menu.Item>
                    <Menu.Item key="10">促销商品</Menu.Item>
                </SubMenu>
                <SubMenu key="sub5" icon={<SettingOutlined />} title="订单">
                    <Menu.Item key="11">订单信息</Menu.Item>
                </SubMenu>
                <SubMenu key="sub6" icon={<SettingOutlined />} title="报表">
                    <Menu.Item key="12">菜品销售</Menu.Item>
                    <Menu.Item key="13">收银流水</Menu.Item>
                    <Menu.Item key="14">菜品流水</Menu.Item>
                    <Menu.Item key="15">店铺营收</Menu.Item>
                    <Menu.Item key="16">用户数据</Menu.Item>
                </SubMenu>
                <SubMenu key="sub7" icon={<SettingOutlined />} title="系统">
                    <Menu.Item key="17">banner管理</Menu.Item>
                    <Menu.Item key="18">优惠卷类型管理</Menu.Item>
                    <SubMenu key="sub8" title="门店配置">
                        <Menu.Item key="19">员工信息</Menu.Item>
                        <Menu.Item key="10">门店信息</Menu.Item>
                        <Menu.Item key="21">员工登录日志</Menu.Item>
                        <Menu.Item key="22">职位管理</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub9" title="桌位管理">
                        <Menu.Item key="23">桌位区域</Menu.Item>
                        <Menu.Item key="24">桌位列表</Menu.Item>
                    </SubMenu>
                    <Menu.Item key="25">扫码点餐配置</Menu.Item>
                </SubMenu>
            </Menu>
        </>
    );
}


